<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>css便签</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style type="text/css">
			.btn {
				position: absolute;
				top: 18px;
				left: 500px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<button class="btn">添加</button>
			<div class="contaner">
				<div class="stickynote">
					<div class="stiBody">
						<h2>123</h2>
						<p>123456789</p>
					</div>
					<img src="img/delete.png" class="del" />
				</div>
			</div>
			<div class="shadow">
				<div class="info">
					<input type="text" class="title inset" />
					<img src="img/savebig.png" class="save" />
					<img src="img/deletebig.png" class="delBig" />
					<textarea name="" rows="" cols="" class="infBody inset"></textarea>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var btn = document.getElementsByClassName('btn')[0];
			var oCon = document.getElementsByClassName('contaner')[0];
			var aSti = document.getElementsByClassName('stiBody');
			var oShadow = document.getElementsByClassName('shadow')[0];
			var oTitle = document.querySelector('.title');
			var oInfo = document.querySelector('.infBody');
			var oDelbig = document.querySelector('.delBig');
			var oSave = document.querySelector('.save');
			var oDel = document.querySelectorAll('.del');

			updata();

			//单击按钮新建标签
			btn.onclick = function() {
				var oSti = document.createElement('div');
				oSti.setAttribute('class', 'stickynote');
				oSti.innerHTML = `<div class="stiBody">
						<h2></h2>
						<p></p>
					</div>
					<img src="img/delete.png" class="del" />`;
				oCon.appendChild(oSti);
				aSti = document.getElementsByClassName('stiBody');
				oDel = document.querySelectorAll('.del');

				updata();
				del();
			}

			//删除
			function del() {
				for(var i = 0; i < oDel.length; i++) {
					oDel[i].index = i;
					oDel[i].onclick = function() {
						this.parentNode.remove();
					}
				}
			}

			//修改
			function updata() {
				oTitle = document.querySelector('.title');
				oInfo = document.querySelector('.infBody');
				for(var i = 0; i < aSti.length; i++) {
					aSti[i].index = i;
					aSti[i].onclick = function() {
						var _this = this;
						oShadow.style.display = 'block';
						oTitle.value = this.children[0].innerHTML;
						oInfo.value = this.children[1].innerHTML;

						//单击del关闭遮罩层
						oDelbig.onclick = function() {
							oShadow.style.display = 'none';
							oTitle.value = '';
							oInfo.value = '';
						}

						//保存
						oSave.onclick = function() {
							_this.children[0].innerText = oTitle.value;
							_this.children[1].innerText = oInfo.value;
							oShadow.style.display = 'none';
						}
					}
				}
			}
		</script>
	</body>

</html>